<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/gg.css" />
<link rel="stylesheet" type="text/css" href="../font_2477364_wu0wguawp9/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="../css/cart_list.css"/>

  <body style="overflow-x: hidden">
    <!-- 头部-->
    <div class="top">
      <!-- 头部导航栏左边 -->
      <div class="top_left">
        <span class="top_left_logo"></span>
        <!-- <span class="top_left_input"
          >下拉查看类目<img src="../img/top/toplogo1.png"
        /> -->
        <ul class="top_nav" >
          <li>礼包收藏</li>
          <li>手办模型</li>
          <li>数码电子</li>
          <li>玩家共创</li>
          <li>新品专区</li>
          <li>二觉礼盒</li>
          <li>服饰日用</li>
        </ul>
      </span>
     
      </div>
     
      <!-- 头部导航栏中间 -->
      <div class="top_center">
        <a href="../index.html"></a>
      </div>
      <!-- 头部导航栏右边-->
      <div class="top_right">
        <a href="./logo.html">
          <span class="top_right_nav hs iconfont" style="font-size: 12px"
            >&#xe637;请QQ登录</span
          ></a
        >
        <a href="#">
          <span class="top_right_nav">
          我的订单<img src="../img/top/toplogo1.png" /></span>
      </a>
        <a href="#">
          <span class="top_right_nav"
            >周边公告<img src="../img/top/toplogo1.png" /></span
        ></a>
        <a href="#">
          <span class="top_right_nav"
            >帮助中心<img src="../img/top/toplogo1.png" /></span
        ></a>
        <a href="#">
          <span class="top_right_nav iconfont" style="font-size: 12px"
            >&#xe633;手机周边</span
          ></a
        >
      </div>
    </div>
    <!-- 头部-->


 <!--  购物车列表标题-->
  <div class="cart_title">
    <div class="cart_title_box">
      <div class="cart_title_box_h1">购物车页</div>
      <div class="cart_title_box_h2"></div>
    </div>
  </div>
  </div>


 <!--  购物车列表大盒子 -->
 <div class="cart_bigbox">
   <ul class="bigbox_title">
      <li class="li_ck">
        <input type="checkbox" class="qx" onclick="quanxuan()">全选
      </li>
      <li class="li_sp">商品</li>
      <li class="li_dj">单价</li>
      <li class="li_sl">数量</li>
      <li class="li_xj">小计</li>
      <li class="li_cz">操作</li>
   </ul>

   <div class="product_box">

    <!-- 购物车商品列表 -->
     
   <!-- 购物车商品列表 -->
    </div>

<div class="buy">
 <input type="button" class="buy_js" value="去结算">
 <div class="buy_money">
   <span>商品金额：</span>
   <span class="money">0</span>
 </div>
 <div class="buy_shuliang">
  <span>数量：</span>
  <span class="shuliang">0</span>
</div>
</div>

<!-- 凑单商品 -->
<div class="coudan">凑单商品</div>
<ul class="coudan_ul">
</ul>

<div class="coudan">赛丽亚为你推荐</div>
<ul class="coudan_ul">
</ul>
 </div>  

 <!-- 凑单商品 -->
 <!--  购物车列表大盒子 -->


<!-- 网页底部 -->
 <div class="buttom">
  <div class="buttom_box1">
  </div> 
  <div class="buttom_box2">
    <img src="../img/buttom1.jpg">
 </div> 
 </div>


 <!-- 网页底部 -->





 <script src="../js/axios.min.js"></script>
 <script src="../js/api.js"></script>
<script>
 let uname=localStorage.getItem("uname");
 let uid=localStorage.getItem("uid");
 let num=0;
 let top_center=document.querySelector(".top_center");
 top_center.onclick=function(){
   location.href="../index.html"
 }
  logo()
  ct_list()
  coudan()
   function logo(){
      let top_right_nav=document.querySelector(".top_right_nav")
       strr=`<a href="#" class="tuichu">退出</a>`
       if(uname){
      top_right_nav.innerHTML=uname+strr;
      let fu=top_right_nav.parentNode;
      fu.href="#";
      let tuichu=document.querySelector(".tuichu");
      console.log(tuichu)
      tuichu.onclick=function(){
        localStorage.removeItem("uname");
        location.reload();
      }
    }
     }
       //判断用户登录 信息
   
   function ct_list(){
    let product_box=document.querySelector(".product_box");
     if(uname){
      axios.get(cart_list,{params:{id:uid}}).then((res) => {
      let obj=res.data.data;
      let str="";
      console.log(obj)
      if(obj.length==0){
        product_box.innerHTML="当前没有商品";
      }
      else{
      obj.forEach((item,i) => {
        str+=`
        <ul class="bigbox_ul">
     <li class="li1_ck">
     <input type="checkbox" class="ck" onclick="danxuan(this)">
     </li>
     <li class="li1_sp">
    <div class="li1_sp_right" >
      <p class="pname">${item.pname}</p>
      <p>颜色：彩</p>
      <p>尺寸：均码</p>
    </div>
     <img src="${item.pimg}">
   </li>
   
   <li class="li1_dj">${item.pprice}</li>
   <li class="li1_sl">
    <input type="button" class="cut_btn" onclick="cut_btn(this,${item.pid})">
    <input type="text" class="val" value="${item.pnum}">
    <input type="button" class="add_btn" onclick="add_btn(this,${item.pid})">
   </li>
   <li class="li1_xj">${item.pprice*item.pnum}</li>
   <li class="li1_cz">
    <button class="del" onclick="del(${item.pid})">删除</button>
   </li>
   </ul>
        `
      });
    product_box.innerHTML=str;
  }
    });
     }
     else{
       alert("请登录后在进行操作")
      product_box.innerHTML="请登录后在进行操作"
     }
   
   }
   //购物车商品列表


   function coudan(){
    let uid=localStorage.getItem("id");
     let cd=document.querySelector(".coudan_ul");
     let pagesize=20;
     let pagenum=0;
     let params={pagesize,pagenum,uid}
     axios.get(allproductlist,{params}).then((res) => {
      let asd = res.data.data;
      let obj = asd.sort((a, b) => a.pid - b.pid);
      console.log(obj)
      let str="";
      for(i=0;i<7;i++){
        str+=`
      <li>
    <img src="${obj[i].pimg}">
    <p>${obj[i].pname}</p>
    <div class="coudan_pprice">${obj[i].pprice}</div>
    <input type="button" class="coudan_add" onclick="cart_add(${obj[i].pid})" value="加入购物车">
    </li> `
      }
     let str1="";
      for(i=7;i<14;i++){
        str1+=`
      <li>
    <img src="${obj[i].pimg}">
    <p>${obj[i].pname}</p>
    <div class="coudan_pprice">${obj[i].pprice}</div>
    <input type="button" class="coudan_add" onclick="cart_add(${obj[i].pid})" value="加入购物车">
    </li> `
      }
    
      let str2=`
           <a href="./item.html?pid=${obj[13].pid}" class="buttom_box_pimg">
          <img src="${obj[19].pimg}">
           </a>
          `
      let coudan_ul=document.querySelectorAll(".coudan_ul");
    let buttom_box1=document.querySelector(".buttom_box1");
   coudan_ul[0].innerHTML=str;
   coudan_ul[1].innerHTML=str1;
   buttom_box1.innerHTML=str2;

    });
    
    }
   //凑单商品列表

   function cart_add(pid){
     let params={uid,pid,pnum:1}
     axios.get(add_product,{ params }).then((res) => {
       alert("添加成功")
       ct_list()
    }); 
   }
  //凑单商品 加入购物车

  function add_btn(btn,pid){
    let txt=btn.previousElementSibling;
    let zj=btn.parentNode.nextElementSibling;
    let dj=btn.parentNode.previousElementSibling;
    let pnum = parseInt(txt.value) + 1;
        let params = { uid, pid, pnum: txt.value };
        axios.get(cart_update, { params }).then((res) => {
         zj.innerHTML=pnum*dj.innerHTML;
          txt.value=pnum
        }); 
  }
  //添加按钮

  function cut_btn(btn,pid){
        let txt = btn.nextElementSibling;
        let zj=btn.parentNode.nextElementSibling;
        let dj=btn.parentNode.previousElementSibling;
        let pnum = txt.value;
        if (parseInt(txt.value) == 1) {
        } else {
          pnum = parseInt(txt.value) - 1;
        }
        let params = { uid, pid, pnum };
        axios.get(cart_update, { params }).then((res) => {
          let obj = res.data;
          console.log(obj);
           zj.innerHTML=pnum*dj.innerHTML;
          txt.value = pnum;
        });
  }
  //减少数量

  function del(pid){
    let params={uid,pid}
    axios.get(cart_delete, { params }).then((res) => {
       alert(res.data.msg)
       ct_list()
    });
   
  }

function danxuan(btn){
  let ck=document.querySelectorAll(".ck");
  let money=document.querySelector(".money");
  let shuliang=document.querySelector(".shuliang");
  let quanxuan=document.querySelector(".qx");
   let arr=[...ck];
   let num=0;
   let res = arr.filter((v) => v.checked == true);
   shuliang.innerHTML=res.length;
   if(arr.length==res.length){
    quanxuan.checked=true;
   }else{
    quanxuan.checked=false;
   }
   console.log(quanxuan);

     res.forEach((item)=>{
      let ul=item.parentNode.parentNode;
      let li=ul.querySelector(".li1_xj");
       num+=parseInt(li.innerHTML);
     })
     money.innerHTML=num;
}
//单选按钮

let flag=true
function quanxuan(){
  let ck=document.querySelectorAll(".ck");
  if(flag==false){
    ck.forEach((item)=>{
      item.checked=false;
     })
     danxuan()
     flag=true
  }
  else{
    ck.forEach((item)=>{
      item.checked=true;
     })
     danxuan()
     flag=false;
  }

   
}
//全选按钮
</script>
</body>
</html>